<template>
    <div class="flex">
        <Select v-model:value="province" :options="proviceList" @change="(v) => selectChange('province', v)"></Select>
        <Select v-model:value ="city" :options="cityList" @change="(v) => selectChange('city', v)"></Select>
        <Select v-model:value="area" :options="areaList" v-show="areaList.length > 0" @change="(v) => handleChange(v)"></Select>
    </div>
</template>
<script setup>  
    import { ref, onMounted, watch } from 'vue'
    import { Select } from 'ant-design-vue'
    import { defHttp } from '@/utils/http/axios'
    const props = defineProps({
        value: {
            type: String,
            default: ''
        }
    })
    const emits = defineEmits(['update:value', 'change'])
    const province = ref()
    const city = ref()
    const area = ref(props.value)

    const proviceList = ref([])
    const cityList = ref([])
    const areaList = ref([])
    const selectChange = (type, value) => {
        if (type === 'province') {
            province.value = value
            city.value = ''
            area.value = ''
            getCityList(value)
        } else if (type === 'city') {
            city.value = value
            area.value = ''
            handleChange(value)
            getAreaList(value)
        } else if (type === 'area') {
            area.value = value
        }
    }
    const getProviceList = async () => {
        let proviceData = await defHttp.get({ url: '/admin/common/area', params: { parentId: 0 } })
        proviceList.value = Object.keys(proviceData).map(key => {
            return { label: proviceData[key], value: key }
        })
    }
    const getAreaList = async (pid) => {
        let areaData = await defHttp.get({ url: '/admin/common/area', params: { parentId: pid } })
        areaList.value = Object.keys(areaData).map(key => {
            return { label: areaData[key], value: key }
        })
        if (areaList.value.length == 0) {
            handleChange(area.value)
        }
    }
    const getCityList = async (pid) => {
        let areaData = await defHttp.get({ url: '/admin/common/area', params: { parentId: pid } })
        cityList.value = Object.keys(areaData).map(key => {
            return { label: areaData[key], value: key }
        })
        if (cityList.value.length == 0) {
            handleChange(city.value)
        }
    }

    const getProvince = async (areaId) => {
       const provinceData = await defHttp.post({ url: `/admin/common/findProvince/${areaId}` })
       const { province: p, city: c } = provinceData
       // 两级的情况
       if (!c) {
         getCityList(p)
         getProviceList()
         province.value = p
         city.value = areaId.toString()
       } else {

         // 三级的情况
         getAreaList(c)     
         getCityList(p)
         getProviceList()   
            province.value = p
            city.value = c
            area.value = areaId.toString()   
       }                                                                                                      
    }                                                                                                      
    
    watch(() => props.value, (v) => {
        if (v) {
            area.value = v
            getProvince(v)
        }
    }, { immediate: true })
    const handleChange = (value) => {
      emits('update:value', value); // 更新父组件的值
      emits('change', value); // 触发 change 事件
    };
    onMounted(() => {
        getProviceList()
    })
</script>